<template>
  <div class="category">
    <div class="searchbox">
      <form action="/">
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
      />
    </form>
    </div>

    <div>
      <div class="sideBar">
        <ul>
          <!-- 侧边栏 -->
          <li
            v-for="(item, index) in tabList"
            :key="item.id"
            @click="tabEvents(index)"
            :class="index == selectIndex ? 'active' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div class="bannerimg"><img :src="imgSrc" alt="" /></div>
      <p class="bannertitle">{{ banner }}分类</p>
      <ul class="goodsList">
        <li @click="goCate(item.id,item.name)"
          v-for="item in child"
          :key="item.id"
          class="goodsList-c"
        >
          <img :src="item.wap_banner_url" alt="" />
          <div>{{ item.name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { indexaction, currentaction } from '@/api/category'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const tabList = ref()
const selectIndex = ref(0)
const child = ref()
const banner = ref()
const imgSrc = ref('')
//
indexaction().then(res => {
  tabList.value = res.categoryList
  currentaction({
    id: tabList.value[selectIndex.value].id
  })
    .then(res => {
      child.value = res.data.currentOne.subList
      banner.value = res.data.currentOne.name
      imgSrc.value = res.data.currentOne.banner_url
    })
})
// 点击导航栏获取二级标题数据
const tabEvents = async (index) => {
  console.log(index)
  selectIndex.value = index
  const list = await currentaction({
    id: tabList.value[selectIndex.value].id
  })
  child.value = list.data.currentOne.subList
  banner.value = list.data.currentOne.name
  imgSrc.value = list.data.currentOne.banner_url
}
const goCate = (id, name) => {
  router.push({ name: 'cageList', query: { id, name } })
}

</script>
<script>
export default {
  name: 'cagetoryView'
}
</script>

<style lang="scss" scoped>
.category {
  text-align: center;
  .searchbox{
    width: 100%;
    height: 100px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
  }
  .bannerimg {
    width: 546px;
    height: 217px;
    margin:130px 0px 0px 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .bannertitle {
    margin-left: 200px;
    margin-bottom: 20px;
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
  .sideBar {
    width: 164px;
    position: fixed;
    left: 0;
    top: 150px;
    background-color: #fff;
    z-index: 1;
    li {
      margin: 0px 0px 64px 20px;
      font-size: 30px;
      color: #333333;
      font-weight: 400;
    }
    .active {
      color: #cea62a;
    }
  }
  .goodsList {
    margin-left: 212px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .goodsList-c {
      text-align: center;
      margin-left: 25px;
      margin-bottom: 20px;
      img {
        width: 137px;
        height: 137px;
      }
      div {
        font-size: 24px;
        color: #333333;
        letter-spacing: 0;
      }
    }
  }
}
</style>
